<html lang="en">
 <head> 
  <style>
            body{
                width:1024px;
                font-size: 36px;
                font-family: 'Armata', sans-serif;
				background: url(images/pt-2.png);
				color: #eee;
				text-shadow: 1px 1px 2px #000;
            }

            #start{
                text-align:left;
                width:1024px;
               
            }
            #slide1{
                text-align:left;
                width:1024px;
                
            }
            #slide2{
                text-align:left;
                width:1024px;
               
            }

            .step{
                text-align:left;
                width:1024px;
               
            }

            #slide7{
                width:1024px;
            }
            #slide8{
                width:1024px;
            }
            #slide9{
                width:1024px;
            }

            .hint_text{
				margin-top: 120px;
                font-size:30px;
                background-color:#282a2f;
                padding:15px;
				border: 1px solid #484d52;
				border-radius: 5px;
				font-size: 18px;
				
            }



            .fallback-message {
               	color: #eee;
                line-height: 1.3;
                width: 780px;
                padding: 10px 10px 0;
                margin: 20px auto;
                border: 1px solid #E4C652;
                border-radius: 10px;
              
            }

            .fallback-message p {
                margin-bottom: 10px;
            }

            .impress-supported .fallback-message {
                display: none;
            }
			em{
				font-style: normal;
				border-bottom: 1px solid #484d52;
				padding-bottom: 2px;
				color: #d5a830;
			}
        </style> 
 </head> 
 <body class="impress-not-supported"> 
  <div id="impress"> 
   <div id="start" class="step"> 
    <p>Creating Stunning Visualizations</p> 
    <p>Impress.js </p> 
    <p class="hint_text">Press <em>Spacebar</em> or Tab To Get Started</p> 
   </div> 
   <div id="slide1" class="step" data-x="-1200" data-y="" data-z="" data-scale="1" data-rotate="">
    <p>This Slide Moves From Left To Right</p>
   </div> 
   <div id="slide2" class="step" data-x="1200"> 
    <p>This Slide Moves From Right To Left</p> 
   </div> 
   <div id="slide3" class="step" data-x="2200" data-y="500"> 
    <p>This Slide Moves From Right To Left and Bottom To Top</p> 
   </div> 
   <div id="slide4" class="step" data-x="2200" data-y="-500"> 
    <p>This Slide Moves Top To Bottom</p> 
   </div> 
   <div id="slide5" class="step" data-x="3200" data-rotate="150"> 
    <p>This Slide Rotates Clockwise Around z-axis</p> 
   </div> 
   <div id="slide6" class="step" data-x="6200" data-scale="3"> 
    <p>This Slide Scales 3 Times</p> 
   </div> 
   <div id="slide7" class="step" data-x="4200" data-y="1500" data-z="1500"> 
    <p>Away</p> 
   </div> 
   <div id="slide8" class="step" data-x="4900" data-y="1500" data-z="100"> 
    <p>Towards</p> 
   </div> 
   <div id="slide9" class="step" data-x="5600" data-y="1500" data-z="-1500"> 
    <p>Futher Towards</p> 
   </div> 
   <div id="slide10" class="step" data-x="6600" data-y="3000" data-scale="10"> 
    <p>Visualization Slide Positions</p> 
   </div> 
  </div> 
  <div class="fallback-message"> 
   <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> 
   <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p> 
  </div> 
  <script type="text/javascript" src="js/impress.js"></script> 
  <script type="text/javascript">impress().init();</script>  
 </body>
</html>